<template>
    <div class="drawer-content-item">
         <el-tabs v-model="detailCurrent" type="card" >
            <el-tab-pane label="基本信息" name="1">
                <el-form label-position="top" >
                    <el-row :gutter="20" class="form-detail-top-box">
                        
                        <el-col :span="6">
                            <el-form-item label="充值金额">
                                {{ form.rechargeAmount || '-' }}元
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="充值类型">
                                {{selectDictLabel(dict.type.recharge_type,form.rechargeType ) ||'-'}}
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="6">
                            <el-form-item label="门店ID">
                                {{form.menDianId ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店名称">
                                {{form.menDian.name ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店用户名">
                                {{form.menDian.menDianUserName ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="可用余额">
                                {{form.menDian.point ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="业务类型">
                                {{form.menDian.ywType ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="负责人名称">
                                {{form.menDian.leaderName ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="负责人电话">
                                {{form.menDian.leaderPhone ||'-'}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店地址">
                               <span v-if="form.menDian.provinceName">{{form.menDian.provinceName }}{{form.menDian.cityName }}{{form.menDian.countyName }}{{ form.menDian.address }}</span> 
                               <span v-else>-</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="充值状态">
                                <el-tag
                                    v-if="form.rechargeStatus"
                                    :type="
                                    [2].includes(form.rechargeStatus)
                                        ? 'success'
                                    
                                        : [1].includes(form.rechargeStatus)
                                        ? 'danger'
                                        : [0].includes(form.rechargeStatus)
                                        ? 'warning':''
                                    "
                                    >
                                    {{
                                    selectDictLabel(
                                        dict.type.recharge_status,
                                        form.rechargeStatus
                                    ) || "未知状态"
                                    }}
                                    </el-tag
                                >
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item label="订单类型">
                                {{selectDictLabel(dict.type.order_type,form.orderType ) ||'-'}}
                            </el-form-item>
                        </el-col>  -->
                       
                    </el-row>
                </el-form>
            </el-tab-pane>
            
            
         </el-tabs>
         <el-dialog
            :visible.sync="dialogVisible"
            title="预览"
            width="800"
            append-to-body
            @closed="closeVideo"
            >
            <video controls width="100%" height="300" ref="videoPlayer">
                <source :src="videoUrl" type="video/mp4" />
                您的浏览器不支持视频播放。
            </video>
        </el-dialog>
    </div>
</template>
<script>
    import {detailOrder} from '@/api/orderManage/orderList'
    import {cozeDetail} from '@/api/orderManage/orderList'

    export default{
        dicts:['order_status','order_type','recharge_status','recharge_type'],
        props: {
            id: {
                type: [Number,String],
                default: ''
            }
        },
        data() {
            return {
                show: false,
                form: {menDian:{}},
                detailCurrent: '1',
                taskForm: {},
                dialogVisible: false,
                videoUrl: ''
            }
        },
        created() {
            this.getDetail()
        },
        methods: {
            closeVideo() {
                this.dialogVisible = false
                this.videoUrl = ''
                this.$refs.videoPlayer.pause();
            },
            showVideo(url) {
                this.videoUrl = url
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs.videoPlayer.load(); // 重新加载视频
                });
            },
            getDetail() {
                detailOrder({oredrNo: this.id}).then(res=> {
                    this.form = res.data
                    if(res.data.useAiType === 3) {
                        this.getCodeDetail(res.data.taskId)
                    }
                })
            },
            getCodeDetail(id) {
                cozeDetail({aiCozeId: id}).then(response => {
                    this.taskForm = response.data || {};
                });
            }
        }
    }
</script>